<template>
  <u-page class="page-home" title="首页" :isBackArrow="false">
    <template #headerLeft>
      <uni-icons type="list"
                 color="#666"
                 size="18"
                 @click="dataMap.changeEnv" />
    </template>
    <template #headerRight>
      <switch checked @change="dataMap.switchChange" style="transform:scale(0.7)" />
    </template>
    <u-refresh :url="dataMap.url" @upCallback="dataMap.upCallback" ref="mescrollItem">
      <template #data="{item}">
        <view class="detail">
          <img :src="item.imageUrl" :alt="item.title" class="image">
          <view class="p1">{{ item.content }}</view>
        </view>
      </template>
    </u-refresh>
  </u-page>
</template>
<script lang="ts">
export default {
  name: 'homeIndexPage'
}
</script>
<script lang="ts" setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { uiData } from '@/utils/skin'
import { useSystemStore } from '@/store/system'
import { openEvnSelect } from '@/utils/app_env'
const GET_LIST_CGI = '/demo/home/list' // 行事历列表

const system = useSystemStore()
const dataMap = reactive({
  url: GET_LIST_CGI,
  type: '',
  upCallback() {

  },
  changeEnv() {
    openEvnSelect()
  },
  switchChange(val: { detail: { value: any } }) {
    system.theme = uiData[Number(val.detail.value)].theme
    // #ifdef APP-PLUS
    // eslint-disable-next-line no-undef
    plus.nativeUI.setUIStyle(uiData[Number(val.detail.value)].value)
    // #endif
    uni.setNavigationBarColor({
      frontColor: val.detail.value ? '#ffffff' : '#000000',
      backgroundColor: val.detail.value ? '#000000' : '#F6F7FB'
    })
  }
})
onLoad((option) => {
  dataMap.type = option.type as string
})
</script>
<style lang="scss" scoped>
.detail {
  padding: 20px;
  margin-bottom: 20px;
  background: var(--bg-color);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: var(--text-color-1);
  .image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .p1 {
    font-size: 14px;
    line-height: 1.5;
  }
}
</style>
